<template>
	<view style="margin-top: 60rpx;position: relative;" class="already-race df-yc w100">
		<view v-if="mask" @click="mask=teamName=false" @touchmove.stop.prevent="moveHandle"
			style="z-index: 999;background-color: rgba(0,0,0,0.3);position: absolute;left: 0;bottom: 0;"
			class="mask wh100">
		</view>
		<!-- 成事战队 -->
		<view class="w100 battle-message">
			<view class="title fb bg-cover fs32 df-c">
				<image class="mr10" style="width: 30rpx;" src="/static/imgs/images/battle.png" mode="widthFix"></image>
				成事战队-{{dayGameMessage.game.goal}}节点
			</view>
			<view class="content df-y wh100">
				<view class="top bs px30">
					<view class="message df-xb wh100">
						<view class="item df-yc white">
							<view class="item-number fb">{{dayGameMessage.game.rank}}</view>
							<view class="item-title fs22">当前队伍排名</view>
						</view>
						<view class="item df-yc white">
							<view class="item-number fb">{{dayGameMessage.game.devote}}</view>
							<view class="item-title fs22">队伍贡献值</view>
						</view>
						<view class="item df-yc white">
							<view class="item-number fb">{{dayGameMessage.game.goal}}</view>
							<view class="item-title fs22">目标贡献值</view>
						</view>
					</view>
				</view>
				<view class="bottom bs px30 white df-xb ai">
					<view class="count-down df-c">
						<image v-if="dayGameMessage.game.status!=5" style="width: 24rpx;"
							src="/static/imgs/images/djs.png" mode="widthFix">
						</image>
						<text class="fs24 ml10">{{openStatus[dayGameMessage.game.status]}} </text>
						<count-down v-if="dayGameMessage.game.status!=5" ref="countdown"
							:time="dayGameMessage.game.time_left" @finish="onFinish" autoStart>
							<template v-slot="{hour, minute, second}">
								<!-- 基本样式 -->
								<view class="case ml10">
									<view class="custom df-c">
										<view class="time df-c fs24">{{hour}}</view><text class="mx10">:</text>
										<view class="time df-c fs24">{{minute}}</view><text class="mx10">:</text>
										<view class="time df-c fs24">{{second}}</view>
									</view>
								</view>
							</template>
						</count-down>
					</view>
					<view class="value df-y">
						<view style="max-width: 180rpx;text-align: right;" class="contri-num fs36 fb one-t">
							{{dayGameMessage.game.reward}}
						</view>
						<view class="contri-title fs24">预计分得贡献值</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 成事战队竞速榜单 -->
		<view class="race-list w100 df-yc ai">
			<view class="title fs32 fb bg-cover df-c">
				成事战队竞速赛榜单
			</view>
			<view class="list wh100 df-yc">
				<view style="color: #F7D9AA;opacity: 0.7;" v-if="dayGameMessage.leaderboard.data.length==0" class="empty">暂无榜单信息</view>
				<view class="scroll_wrap bs wh100">
					<scroll-view scroll-y="true">
						<view class="items wh100">
							<view class="item df ai" v-for="(item,index) in dayGameMessage.leaderboard.data"
								:key="index">
								<view class="medal df-c">
									<image v-if="index<3" :src="item.ico" mode="widthFix">
									</image>
									<view v-if="index>=3" class="ranking fb fs36"><text
											v-if="index<9">0</text>{{index+1}}</view>
								</view>
								<view class="user df ai">
									<view class="user_img ml20 br-cir">
										<image :src="item.avatar" mode="widthFix"></image>
									</view>
									<view class="user_name ml20 white one-t">
										{{item.team_name}}
									</view>
								</view>
								<view class="contribute_value bs df fs28 one-t">
									{{item.contribution}}贡献值
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="button-bg df jc wh100">
				<view @click="jump('/pages/public/poster/index',{posterType:'seal',shareType:'day_game'})"
					class="button fs32 fb df-c">
					邀请好友获得贡献值</view>
			</view>
		</view>
		<!-- 我的战队信息 -->
		<view class="update-name df-yc wh100">
			<view class="name fs32 df-c">
				<text :class="['mr20','df-c',success]">{{dayGameMessage.team.team_name}}</text>
				<image @click="modify" style="width: 28rpx;" :src="temImgUrl+status_icon" mode="widthFix">
				</image>
			</view>
			<view style="height: 240rpx;" class="scroll_wrap w100">
				<scroll-view scroll-x="true">
					<view class="menber-list df">
						<view class="item df-yc">
							<view class="item-img">
								<view class="leader wh100">
									<image class="image" :src="dayGameMessage.team.leader.user_avatar" mode="widthFix">
									</image>
									<view class="leader_icon df-c">队长</view>
								</view>
							</view>
							<view class="item-value df-c fs24 mt10">
								<view style="max-width: 100rpx;" class="one-t">{{dayGameMessage.team.leader.devote}}
								</view>贡献值
							</view>
							<view class="item-name fs24 white">{{dayGameMessage.team.leader.user_name}}</view>
						</view>
						<view class="item df-yc" v-for="(item,index) in dayGameMessage.team.player" :key="index">
							<view class="item-img">
								<view class="leader wh100">
									<image class="image" :src="item.avatar" mode="widthFix">
									</image>
								</view>
							</view>
							<view class="item-value df-c fs24 mt10">
								<view style="max-width: 100rpx;" class="one-t">{{item.devote}}
								</view>贡献值
							</view>
							<view class="item-name fs24 white">{{item.name}}</view>
						</view>
						<view
							@tap="jump('/pages/public/team-poster',{daygame_stage:dayGameMessage.team.daygame_stage,team_id:dayGameMessage.team.team_id})"
							class="add df-y ai">
							<view class="add-img">
								<image style="width: 90rpx;" src="/static/imgs/images/yqhy.png" mode="widthFix"></image>
							</view>
							<text class="fs24" style="color: rgba(227, 171, 110, 0.4);">邀请好友</text>
						</view>
					</view>
				</scroll-view>
				<view style="position: absolute;top:-400rpx;z-index: 99999;left:50%;transform: translateX(-50%);"
					v-if="teamName" class="modify br-20 df-yc">
					<view class="fs34 w100 df-c mt30 fb">
						修改战队名称
					</view>
					<view class="df-c mt30 w100 bs px30">
						<view style="width: 160rpx;" class="label">战队名：</view>
						<view class="input w100">
							<u-input :placeholder="null" v-model="teamNameValue" type="text" />
						</view>
					</view>
					<view @click="modifyHandler(dayGameMessage.team.team_id)" class="button mt30 df-c fs26 white">
						确认修改
					</view>
				</view>
			</view>
			<!-- 修改成功弹窗 -->
			<view v-if="modify_success" class="popup fs24 white df-c">
				战队名称修改成功
			</view>
			<!-- 修改战队名弹窗 -->
		</view>
	</view>
</template>

<script>
	import countDown from './count-down.vue'
	import share from './share.vue'
	export default {
		props: {
			status: Boolean
		},
		components: {
			countDown,
			share
		},
		data: function() {
			return {
				dayGameMessage: {},
				openStatus: {
					1: "距离比赛开启",
					3: "距离本次结束",
					5: "比赛已经结束"
				},
				raceList: [],
				temImgUrl: this.$IMG_URL_TEMP,
				teamName: false,
				teamNameValue: "",
				modify_success: false,
				success: '',
				status_icon: '/xg.png',
				showShare: true,
				mask: false
			}
		},

		methods: {
			moveHandle() {},
			//参加信息
			getDayGame() {
				const that = this
				this.$api('dayGame.gameIndex').then(res => {
					this.dayGameMessage = res.data
					this.$store.commit("JOIN_DAY_GAME", Boolean(res.data.game.status))
					uni.setStorageSync('gameStatus', Boolean(res.data.game.status))
					this.$emit('totalValue', res.data.game.user_contribution)
				})
			},
			modify() {
				this.mask = true
				this.teamName = true
			},
			// 修改戰隊名称
			modifyHandler(id) {
				const that = this
				this.$api('dayGame.modifyTeamName', {
					team_id: id,
					team_name: this.teamNameValue
				}).then(res => {
					if (res.code === 1) {
						this.getDayGame()
						this.modify_success = true
						this.teamName = false
						this.mask = false
						this.success = "modify_success"
						this.status_icon = '/ok.png'
						setTimeout(function() {
							that.modify_success = false
						}, 2000);
					} else {
						this.$tools.toast(res.msg)
					}
				}).catch(err => {
					this.teamName = false
					this.mask = false
					this.$tools.toast("修改失败,请重试")
				})
			},
			// 路由跳转
			jump(path, params) {
				this.$Router.push({
					path: path,
					query: params
				});
			}
		},
		created() {
			if (this.status) {
				this.getDayGame()
			}
		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.already-race {
		background-color: #622128;
	}


	.battle-message {
		width: 690rpx;
		height: 401rpx;
		background: #53181E;
		border: 1rpx solid rgba($color: #E3AB6E, $alpha: 0.5);
		border-radius: 20rpx;
		position: relative;

		.title {
			line-height: 86rpx;
			left: 50%;
			transform: translateX(-50%);
			top: -20rpx;
			width: 388rpx;
			height: 86rpx;
			color: #E3AB6E;
			font-family: Source Han Serif CN;
			position: absolute;
			background-image: url(#{$IMG_URL}/cszd.png);
		}

		.content {
			.top {
				height: 260rpx;

				.message {
					margin-top: 110rpx;

					.item {
						.item-number {
							font-size: 42rpx;
							font-family: Source Han Serif CN;
							color: #E8B986;
							line-height: 28px;
							text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.24);

							background: linear-gradient(1deg, #FFDEC3 10%, #FFF1E9 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}

			.bottom {
				border-radius: 0 0 20rpx 20rpx;
				background-color: #481419;
				flex: 1;

				.contri-num {
					justify-content: flex-end;
					font-family: Source Han Serif CN;
					color: #E3AB6E;
				}
			}
		}
	}

	.race-list {
		width: 690rpx;
		min-height: 300rpx;
		background: #53181E;
		border: 1rpx solid rgba($color: #E3AB6E, $alpha: 0.5);
		border-radius: 20rpx;
		position: relative;
		margin-top: 76rpx;

		.title {
			font-family: Source Han Serif CN;
			color: #E3AB6E;
			position: absolute;
			top: -20rpx;
			left: 50%;
			line-height: 80rpx;
			transform: translateX(-50%);
			width: 488rpx;
			height: 86rpx;
			background-image: url(#{$IMG_URL}/jsbtbg.png);
		}

		.list {
			margin-top: 90rpx;
			overflow: hidden;

			.scroll_wrap {
				padding: 0 30rpx;

				.items {
					padding-bottom: 180rpx;
				}
			}

			.items {
				.item {
					height: 130rpx;
					border-bottom: 1rpx solid rgba(51, 51, 51, 0.06);

					.medal {
						width: 104rpx;
						height: 50rpx;

						.ranking {
							font-family: DIN Alternate;
							color: #E3AB6E;
							opacity: 0.5;
						}
					}

					.user {
						justify-self: flex-start;

						.user_img {
							width: 70rpx;
							height: 70rpx;
							overflow: hidden;
						}

						.user_name {
							width: 200rpx;
						}
					}

					.contribute_value {
						flex: 1;
						width: 180rpx;
						font-family: Source Han Serif CN;
						color: #E3AB6E;
						justify-content: flex-end;
						font-style: italic;
						padding-right: 5rpx;
					}
				}
			}
		}

		.button-bg {
			bottom: 0;
			background: linear-gradient(0, #622128 50%, transparent 100%);
			position: absolute;
			height: 250rpx;
			border-radius: 0 0 20rpx 20rpx;

			.button {
				color: #622128;
				margin-top: 120rpx;
				width: 630rpx;
				height: 88rpx;
				background: linear-gradient(270deg, #E8B58E, #F7D9AA);
				box-shadow: 0px 3rpx 1rpx 0px #580F17;
				border-radius: 44rpx;
			}
		}
	}

	.time {
		width: 51rpx;
		height: 51rpx;
		background-color: #53181E;
		border-radius: 4rpx;

	}

	.update-name {
		position: relative;
		margin-top: 82rpx;
		bottom: 0;
		width: 100%;
		height: 394rpx;
		background: #53181E;
		box-shadow: 0px 2rpx 40rpx 0px rgba(83, 24, 30, 0.16);
		border-radius: 64rpx 64rpx 0px 0px;

		.modify_success {
			height: 68rpx;
			background: #622128;
			border-radius: 34rpx;
			padding: 0 30rpx;
		}

		.modify {
			width: 690rpx;
			height: 350rpx;
			background-color: #FFFFFF;


			.input {
				border-bottom: 1rpx solid #e0e0e0;
			}

			.button {
				width: 500rpx;
				height: 80rpx;
				background: linear-gradient(270deg, #53181E, #7D333B);
				box-shadow: 0px 5rpx 18rpx 0px rgba(83, 24, 30, 0.35);
				border-radius: 40rpx;
			}
		}

		.popup {
			position: absolute;
			width: 368rpx;
			height: 99rpx;
			background: #000000;
			opacity: 0.8;
			border-radius: 20rpx;
			top: -110rpx;
		}

		.name {
			color: #E3AB6E;
			margin-top: 30rpx;
		}

		.menber-list {
			margin-top: 50rpx;

			.item {
				width: calc(750rpx/3);
				flex-shrink: 0;

				.item-value {
					color: #E3AB6E;
				}

				.item-name {
					opacity: 0.7;
				}

				.item-img {
					width: 90rpx;
					height: 90rpx;
					background-color: pink;
					border-radius: 50%;
					overflow: hidden;

					.leader {
						position: relative;
						overflow: hidden;

						.image {
							position: absolute;
							left: 0;
							top: 0;
						}

						.leader_icon {
							position: absolute;
							width: 89rpx;
							height: 31rpx;
							background: #EECE9D;
							bottom: 0;
							font-size: 18rpx;
							color: #53181E;
							z-index: 90;
						}
					}
				}
			}

			.add {
				flex-shrink: 0;
				width: calc(750rpx/3);
			}
		}
	}
</style>
